<template>
  <div class="page-container">
    <div class="container">
    <h1>员工请假/加班请求</h1>

    <!-- 审批状态筛选 -->
    <el-row justify="start" width="20px">
      <el-select v-model="approvalStatusFilter" placeholder="筛选审批状态" @change="fetchRequests" >
        <el-option label="所有" :value="null"></el-option>
        <el-option label="待审批" :value="'待审批'"></el-option>
        <el-option label="已批准" :value="'批准'"></el-option>
        <el-option label="已拒绝" :value="'拒绝'"></el-option>
      </el-select>
    </el-row>
    <!-- 表格展示 -->
    <el-table :data="filteredRequests" border stripe style="width: 100%">
      <el-table-column prop="id" label="ID" width="50" align="center"/>
      <el-table-column prop="employeeName" label="员工姓名" width="100" align="center"/>
      <el-table-column prop="type" label="申请类型" width="100" align="center"/>
      <el-table-column prop="requestReason" label="申请理由" />
      <el-table-column prop="startDate" label="开始日期" width="160">
        <template #default="scope">
          <span>{{ formatDate(scope.row.startDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="endDate" label="结束日期" width="160">
        <template #default="scope">
          <span>{{ formatDate(scope.row.endDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="approvalStatus" label="审批状态" width="100" align="center"/>
      <el-table-column label="操作" width="200" align="center">
        <template v-slot="scope">
          <!-- 根据审批状态动态显示按钮或“已审批” -->
          <div v-if="scope.row.approvalStatus === '待审批'">
            <el-button @click="approveRequest(scope.row, '批准')" type="success">批准</el-button>
            <el-button @click="approveRequest(scope.row, '拒绝')" type="danger" style="margin-left: 10px;">拒绝</el-button>
          </div>
          <div v-else>
            <!-- 如果审批状态为“已批准”或“已拒绝”，都显示“已审批” -->
            <span>已审批</span>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        :current-page="pageNum"
        :page-size="pageSize"
        :total="total"
        layout="total, prev, pager, next"
        @current-change="fetchRequests"
    />
  </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const requests = ref([]); // 存储所有请求数据
    const pageNum = ref(1);   // 当前页码
    const pageSize = ref(8);  // 每页显示数量
    const total = ref(0);     // 总记录数
    const approvalStatusFilter = ref(null); // 默认筛选待审批状态

    // 根据审批状态筛选请求
    const filteredRequests = computed(() => {
      if (approvalStatusFilter.value === null) {
        return requests.value; // 不筛选，返回所有请求
      }
      return requests.value.filter(
          (request) => request.approvalStatus == approvalStatusFilter.value
      );
    });

    // 获取请假/加班请求
    const fetchRequests = (currentPage = 1, currentPageSize = pageSize.value) => {
      pageNum.value = currentPage; // 更新当前页码
      axios
          .get('http://localhost:8080/HR/showRequests', {
            params: {
              pageNum: pageNum.value,
              pageSize: currentPageSize,
              approvalStatus: approvalStatusFilter.value,
            },
          })
          .then((response) => {
            requests.value = response.data.data.records;
            total.value = response.data.data.total;
          })
          .catch((error) => {
            console.error('获取请求失败:', error);
          });
    };

// 日期格式化
    const formatDate = (date) => {
      if (!date) return '';
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, '0'); // 月份补零
      const day = String(d.getDate()).padStart(2, '0'); // 日期补零
      const hours = String(d.getHours()).padStart(2, '0'); // 小时补零
      const minutes = String(d.getMinutes()).padStart(2, '0'); // 分钟补零
      const seconds = String(d.getSeconds()).padStart(2, '0'); // 秒补零

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    };
    // 审批员工请求
    const approveRequest = (request, status) => {
      // 设置请求的审批状态
      request.approvalStatus = status;

      // 发送审批请求
      axios
          .post('http://localhost:8080/HR/approve', request)
          .then(() => {
            // 成功消息提示
            console.log(`${status === '批准' ? '批准' : '拒绝'}成功`);
            fetchRequests(); // 刷新请求列表
          })
          .catch((error) => {
            console.error(`${status === '批准' ? '批准' : '拒绝'}失败:`, error);
          });
    };

    // 页面加载时获取数据
    onMounted(() => {
      fetchRequests(pageNum.value, pageSize.value);
    });

    return {
      requests,
      pageNum,
      pageSize,
      total,
      approvalStatusFilter,
      filteredRequests,
      fetchRequests,
      approveRequest,
      formatDate,
    };
  },
};
</script>

<style scoped>
h1 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  color: #409eff;
}

.el-table {
  margin-bottom: 20px;
}

.el-pagination {
  margin-top: 20px;
  text-align: center;
}
.container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
approvalStatusFilter {
  width: 20px;
}
</style>
